<template>
    <div id="feedBack" class="person-detail">
        <div>
            <van-nav-bar
                title="意见反馈"
                :fixed="true"
                left-arrow
                @click-left="back"
                />
        </div>
        <div>
            <van-tabs type="line" color="#DC4630 "  title-active-color="#DC4630 " title-inactive-color="#333333"  v-model="chooseTab">
                <van-tab title="问题提交">
                    <van-cell-group>
                        <div>
                            <p class="feedBackTheme">
                                反馈主题
                            </p>
                            <van-field v-model="feedBackTheme" 
                                rows="1"
                                autosize
                                placeholder="请输入反馈主题" />
                        </div>
                        <div>
                            <p class="feedBackTheme">
                                反馈内容
                            </p>
                            <van-field v-model="feedBackContent" 
                                type="textarea"
                                placeholder="请输入反馈内容" 
                                rows="10"
                                maxlength="100"
                                size="large"
                                :border="true"
                                autosize/>
                        </div>
                        <!-- <van-field
                            v-model="feedBackTheme"
                            label="反馈主题"
                            placeholder="请输入反馈主题"
                            rows="1"
                            autosize
                        />
                        <van-field
                            v-model="feedBackContent"
                            label="反馈内容"
                            type="textarea"
                            placeholder="请输入反馈内容"
                            rows="3"
                            size="large"
                            :border="true"
                            autosize
                        /> -->
                    </van-cell-group>
                    <div class="mine-out">
                        <van-button type="default">提交</van-button>
                    </div>
                </van-tab>
                <van-tab title="我的反馈">
                    <div v-for="(item,index) in feedBackContentList" :key="index" class="feedback-body">
                        <p class="feedback-tag">
                           <van-tag type="success" v-if="item.done">已解决</van-tag> 
                           <van-tag color="#f2826a" v-if="!item.done">跟进中</van-tag>
                        </p>
                        <div class="message-body">
                           <p class="message-title">{{item.question}}</p>
                            <p class="message-content width-p">{{item.answer}}</p>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>
<script>
export default {
    name: 'feedBack',
    components: {},
    data() {
        return {
            feedBackTheme:'',
            feedBackContent:'',
            chooseTab:0,
            feedBackContentList:[
                {
                    done:true,
                    question:'系统界面无反应，系统进程死锁，突然就是各种崩溃了',
                    answer:'您好，您所反应的问题我们已经收集，会尽快核实，感谢您提供的信息，辛苦您了。'
                },
                {
                    done:false,
                    question:'系统界面无反应，系统进程死锁，突然就是各种崩溃了',
                    answer:'您好，您所反应的问题我们已经收集，会尽快核实，感谢您提供的信息，辛苦您了。'
                },
                {
                    done:true,
                    question:'系统界面无反应，系统进程死锁，突然就是各种崩溃了',
                    answer:'您好，您所反应的问题我们已经收集，会尽快核实，感谢您提供的信息，辛苦您了。'
                },
            ]
        }
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
         back(){
             this.$router.go(-1)
        },
        checkInput(){
            let a = this.feedBackTheme,b = this.feedBackContent,obj={flag:false,str:''}
            if(a == '' || b == ''){
                obj.flag = false
                obj.str = '请输入反馈信息'
                return obj
            }else{
                obj.flag = true
                obj.str = '感谢您得反馈！'
                return obj
            }
        },
        submitContent(){
            let obj = this.checkInput()
            if(obj.flag){
                this.$toast(obj.str);
                const timer = setInterval(() => {
                    this.$toast.clear()
                    this.chooseTab = 1
                    clearInterval(timer);
                }, 1000);
            }else{
                this.$toast(obj.str);
            }
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../style/index.scss';
.van-tab__pane{
    text-align: center;
}
.width-p{
    width: 100%;
}
</style>
<style lang="scss">
#feedBack{
    .feedBackTheme{
        text-align: left;
        padding: 10px 20px;
        font-size: 16px;
        color: #333333;
    }
    >div:nth-child(2){
        height:100%;
        background: #fff;
    }
    .message-body{
        width: 70%;
        padding-left: 10px;
    }
    .mine-out{
        margin-top: 26%;
            button{
                width: 80%;
                height:80%;
                margin: auto;
                display: block;
                font-family: PingFangSC-Medium;
                font-size: 20px;
                color: #fff;
                letter-spacing: 0;
                text-align: center;
                background: #DC4630;
                border-radius: 44px;
                border-radius: 44px;
            }
        }
    .message-content{
        border-radius: 10px;
        margin-top: 10px;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0;
        line-height: 20px;
        text-align: left;
    }
    .feedback-tag{
        margin: 0;
    }
    .feedback-body{
        display: flex;
        padding: 15px;
        border-bottom: 1px solid #f5f5f5;
    }
    .message-title{
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        margin: 0;
    }
    .van-ellipsis{
        font-size: 18px;
    }
    [class*=van-hairline]::after{
        border: none;
    }
    .van-field__label span{
        font-size: 14px;
    }
    .van-field__control{
        background: #F5F7FA;
        border-radius: 4px;
        border-radius: 4px;
        padding: 0.2em;
    }
    .van-field__body textarea{
        height: 180px;
    }
    .van-field__label{
        text-align: left;
        max-width: 70px;
    }
    .van-cell-group .van-cell .van-cell__value{
        height: 40px;
    }
    .van-cell-group .van-cell--large .van-cell__value{
        height: 160px;
    }
}
</style>

